<!-- eslint-disable prettier/prettier -->
<template>
  <div class="container">
    <Breadcrumb :items="['menu.support', '支撑单位']" />
    <div class="content">
      <a-layout>

        <a-layout>

          <a-layout-content>
            <a-table
              :columns="columns"
              :data="form.noData ? [] : data"
              :bordered="form.border"
              :hoverable="form.hover"
              :stripe="form.stripe"
              :loading="form.loading"
              :show-header="form.tableHeader"
              :row-selection="form.checkbox ? rowSelection : undefined"
            >
              <template #columns>
                <a-table-column title="序号" data-index="key" />
                <a-table-column title="支撑单位" data-index="name" />
                <a-table-column title="备注" data-index="otherName" />
                <a-table-column title="管理企业数量" data-index="sort" />
                <a-table-column title="通知邮箱" data-index="status" />
                <a-table-column title="操作">
                  <template #cell>
                    <a-space>
                      <a-button type="primary" @click="()=>gotoDetail()">编辑</a-button>
                    </a-space>
                    <a-space class="lookedit">
                      <a-button type="outline" @click="()=>gotoDetail()">查看</a-button>
                    </a-space>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </a-layout-content>
        </a-layout>
        <!-- <a-layout-footer>Footer</a-layout-footer> -->
      </a-layout>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue"
import { useRouter } from "vue-router"

const router = useRouter()

const form = reactive({
  border: true,
  borderCell: false,
  hover: true,
  stripe: true,
  checkbox: true,
  loading: false,
  tableHeader: true,
  noData: false
})

const rowSelection = reactive({
  type: "checkbox",
  showCheckedAll: true
})

const columns = [
  {
    title: "序号",
    dataIndex: "key"
  },
  {
    title: "企业名称",
    dataIndex: "name"
  },
  {
    title: "统一信用代码",
    dataIndex: "otherName"
  },
  {
    title: "标签",
    dataIndex: "sort"
  },
  {
    title: "行业",
    dataIndex: "status"
  },
  {
    title: "支撑单位",
    dataIndex: "time"
  },
  {
    title: "操作",
    dataIndex: "email"
  }
]

const data = [
  {
    key: "1",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "2",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "3",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "4",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "5",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  }
]
const gotoDetail = () => {
  // console.log(id)
  router.push({
    name: "EnterpriseDetail",
    query: {
      // detailId: id
    }
  })
}
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}
.content {
  margin: 10px;
}
.plusUser {
  float: right;
  margin-top: 15px;
  margin-right: 20px;
}
.lookedit {
  margin: 0 10px;
}
.searchEnterprise {
  // margin-left: 50px;
  background-color: #fff;
  padding: 5px;
  margin-bottom: 15px;
  .search {
    margin-left: 200px;
    .arco-input-outer {
      width: 280px !important;
    }
    .arco-space-item {
      width: 280px !important;
    }
  }
}

.allEnterprise {
  margin: 10px;
  font-size: 18px;
  font-weight: bolder;
}
.search {
  margin: 10px 10px;
  background-color: #fff;
  .arco-input-outer {
    width: 180px !important;
  }
  .arco-space-item {
    width: 180px !important;
  }
}
</style>
